<template>
  <div class="content">
    <!-- 公共组件-每个页面必须引入 -->
    <public-module></public-module>
	<div class="integral-page">
			<div class="integral-top">
				<img src="https://pic.moresu.com/FuHNgNgs8amlNvMHO_Pk-a3jIbpt" style="width:100vw;height:53.33vw;position: relative;object-fit: cover"/>
				<div class="integral-banaer">
					<u-swiper indicator keyName="adImageUrl" indicatorMode="line" height="322rpx" :list="info.wxAppAdSwipeList" radius='10px' @click="clickAD">
					</u-swiper>
				</div>
			</div>
	
			<div class="integral-class">
				<div class="class-item" v-for="(item,index) in classList" v-if="index<8" @click="toGoodsList(item)" :key="index">
					<img :src="item.classImage" style="width:26px;height:26px;object-fit: contain;display: inline-block;"/>
					<div>{{ item.className }}</div>
				</div>
			</div>
	
			<div class="can-dui-block" v-if="info.canOrderGoodsList && info.canOrderGoodsList.length > 0">
				<div class="can-dui-div">
					<div class="can-dui-title">
						<div class="big-title">
							挑挑拣拣随便兑
							<div class="goCanBtn" @click="toCanGoodsList">立即兑换</div>
						</div>
						<div class="sub-title">您当前有 {{ info.integralValue }} 积分，以下商品任意兑换</div>
					</div>
					<div class="dui-goods-list">
						<div class="dui-goods-item" v-for="(item,index) in info.canOrderGoodsList" @click="toGoodsInfo(item)" :key="index">
							<div class="goods-img">
								<img :src="item.goodsImage"  class="img" mode="aspectFit"/>
							</div>
							<div class="goods-name">{{item.goodsName}}</div>
							<div class="goods-attr">已兑数量：{{ item.saleNum }}</div>
							<div class="goods-price">{{ item.goodsPrice }} <span style="font-size:10px;font-weight:400;padding-left:5px">积分</span></div>
						</div>
					</div>
				</div>
			</div>
	
			<div class="hot-dui-block">
				<div class="hot-dui-div">
					<div class="hot-title">热兑榜单</div>
					<div class="hot-goods-list">
						<div class="hot-goods-item" v-for="(item,index) in info.hotGoodsList" @click="toGoodsInfo(item)" :key="index">
							<div class="goods-img">
								<img :src="item.goodsImage" style="width:100%;height:100%;border-radius: 8px;object-fit: contain;"/>
								<img src="https://pic.moresu.com/FiWlAhv2UfVdoMwyOdYkX93nkghg" mode="aspectFit" style="width:22px;height:22px;position: absolute;right:-10px;top:-10px;" v-if="index==0"/>
								<img src="https://pic.moresu.com/Fp29oyEGyWc8MnZBjfQdHg9dLS3u" mode="aspectFit" style="width:22px;height:22px;position: absolute;right:-10px;top:-10px;" v-else-if="index==1"/>
								<img src="https://pic.moresu.com/Fs6IHl6rfr8YyInRaeCPgpX3np1D" mode="aspectFit" style="width:22px;height:22px;position: absolute;right:-10px;top:-10px;" v-else-if="index==2"/>
							</div>
							<div class="goods-info">
								<div class="goods-name">{{item.goodsName}}</div>
								<div class="goods-price">{{ item.goodsPrice }} <span style="font-size:10px;font-weight: 400;padding-left:5px">积分</span></div>
							</div>
							<div class="goods-num">
								<span style="vertical-align: middle;display: inline-block;">{{ item.saleNum }}</span>
								<img src="https://pic.moresu.com/Fl5c02-fPTPsClq6lC9-tPPgXJBY" style="width:13px;height:15px;vertical-align: middle;margin-left:10px;display: inline-block;" mode="aspectFit"/>
							</div>
						</div>
	
					</div>
				</div>
	
			</div>
	
			<div class="goods-list">
				<u-sticky :zIndex="1">
					<div style="background: #fff" class="goods-title">
						<u-tabs :list="allClass" @change="changeClass" keyName="className" lineColor="#000"></u-tabs>
						<div class="integral-tab" style="padding:10px">
							<u-tabs :list="prcieList" @change="changePrice" keyName="title" :lineHeight="0" :itemStyle="{'padding':'0 !important','margin-right':'12px'}" :activeStyle="{'background': '#FC6E02','border-radius': '15px','height':'30px','padding':'0 10px','font-size':'12px','color': '#fff','line-height': '30px'}" :inactiveStyle="{'background': '#FFF3E9','border-radius': '15px','height':'30px','padding':'0 10px','font-size':'12px','color': '#FC6E02','line-height': '30px'}"></u-tabs>
						</div>
					</div>
				</u-sticky>
				<div class="goods-con">
					<div class="goods-list-con">
						<div class="goods-list-item" v-for="(item,index) in list" @click="toGoodsInfo(item)" :key="index">
							<div class="goods-img"><img :src="item.goodsImage" class="img" mode="aspectFit"/></div>
							<div class="goods-name">{{ item.goodsName }}</div>
							<div class="goods-attr">已兑数量：{{ item.saleNum }}</div>
							<div class="goods-price">
								<span>{{ item.goodsPrice }} <span style="font-size:10px;font-weight: 400;padding-left:5px">积分</span></span>
							</div>
						</div>
					</div>
					
					<div style="padding:40rpx 0;">
					   <u-loadmore :status="status" ></u-loadmore>
					</div>
				</div>
			</div>
	
		</div>
		
		<bnavbar ref="bnavbar"></bnavbar>
	
  </div>
</template>

<script>
  import bnavbar from './components/b-navbar';
  import{integralIndexData,integralClassList,inquiryCartInfo,integralGoodsList} from '@/config/points.js'
  import {pageSeo} from '@/config/api.js'
  export default {
    components: {
       bnavbar

    },
    data() {
      return {
	    
			uid:'',
			list:[],
			page:1,
			pageSize:10,
			isLogin:false,

			loading: false,
			status: 'loadmore',
			immediateCheck:false,
			count:0,
			show:false,
			agreement:'',
			article:null,
			active:0,
			info:{},
			classList:[],
			allClass:[],
			classId:'',
			priceRange:[],
			prcieList:[
				{title:'全部',key:[]},
				{title:'0-5000',key:[0,5000]},
				{title:'5001-20000',key:[5001,20000]},
				{title:'20001-50000',key:[20001,50000]},
				{title:'50001-100000',key:[50001,100000]},
				{title:'100000以上',key:[100000,1000000000000000000000000]},
			],
			carInfo:0,
      }
    },

	async onLoad(options) {
    	await this.$onLaunched;	
        this.getInfo();
		this.getClassList();
		this.$refs.bnavbar.init(0,'#FF8E12')
    },
	async onShow() {
			// #ifdef H5
			pageSeo({pageType: 'indexPage'}).then((res)=>{
				document.title = res.pageTitle;
			})
			// #endif	
	},
    onReachBottom() {
		if(this.list.length >= this.count) {
			this.status = 'nomore';
			return ;
		}
		this.page = ++ this.page;
		this.getList()
	},
	
    methods: {
		//广告链接
		clickAD(index){
			let item = this.info.wxAppAdSwipeList[index]
			if(item.adImageLink){
				uni.navigateTo({
					url: item.adImageLink
				})
			}
		},
		toGoodsList(item){
			uni.navigateTo({
				url: 'intergralGoodsList?classId='+item.classId + '&className='+item.className
			})
		},
		
		

		changePrice(e){
			console.log(e)
			this.priceRange = e['key'];
			this.clearData();
			this.getList()
		},

		changeClass(e){
			console.log("e",e)
			this.classId = e.classId;
			this.clearData();
			this.getList()
		},

		getClassList(){
			integralClassList({isRecommend:1}).then((res)=>{
				this.classList = res;
			})
			this.allClass = []
			integralClassList().then((res)=>{
				this.allClass = res;
				this.allClass.unshift({className:'全部',classId:''})
				this.classId = '';
				this.getList()
			})
		},

		getInfo(){
			integralIndexData().then((res)=>{
				this.info = res;
			})
		},

		toCanGoodsList(){
			uni.navigateTo({
				url: "intergralCanGoodsList"
			})
		},

		toGoodsInfo(item){
			uni.navigateTo({
				url: "integralGoodsInfo?goodsId=" + item.goodsId
			})
		},

	
		//清除数据
		clearData(){
			this.page = 1;
			this.list = [];
			this.finished = false;
			this.loading = false;
		},

		//获取列表
		getList(){
			this.loading = true;
			let listQuery = {};
			listQuery.pageNum = this.page;
			listQuery.pageSize = this.pageSize;
			listQuery.classId = this.classId;
			listQuery.priceRange = this.priceRange;
			integralGoodsList(listQuery).then((res)=>{
				this.loading = false;
				this.list = this.list.concat(res.list ? res.list : [] );
				this.count = res.count;
				if(this.list.length >= this.count) {
					this.status = 'nomore';
				}else{
					this.status = 'loadmore';
				}
				
				
			}).catch(()=>{
				// 加载状态结束
				this.status = 'loadmore';
			})
		},
		
	}
	

  }
</script>


<style lang="scss">
@import '@/style/common.scss';

.integral-page{
  min-height: 100%;
  padding-bottom:50px;
  background: #F0F0F0;
  .integral-top{
    margin-bottom:16px;
    .integral-banaer{
      padding:0 12px;
      position: relative;
      z-index: 1;
      margin-top:-46vw;
      .banaer-img{
        width:100%;
        height:calc((100vw - 24px)*0.46);
        border-radius: 8px;
        box-shadow: 0px 0px 10px rgba(255, 0, 0, 0.31);
        cursor: pointer;
      }
    }
  }
  .integral-class{
    padding:0 12px;
    margin-bottom:16px;
    display: flex;
    justify-items: flex-start;
    align-items: center;
    flex-wrap:wrap;
    .class-item{
      text-align: center;
      color: #333333;
      font-size:12px;
      cursor: pointer;
      width:20%;
    }
  }
  .can-dui-block{
    padding:0 12px;
    margin-bottom:16px;
    .can-dui-div{
      background: #fff;
      border-radius: 8px;
      overflow: hidden;
      .can-dui-title{
        background: url("https://pic.moresu.com/FjAk0mJ8qhj7PCcZo37y22SkMLKJ") no-repeat;
        background-size: cover;
        padding:12px;
        color:#fff;
        .big-title{
          font-size: 16px;
          font-weight: bold;
          .goCanBtn{
            float:right;
            width:76px;
            height:24px;
            line-height: 24px;
            border-radius: 12px;
            color: #FF3D00;
            background: #fff;
            font-size:12px;
            text-align: center;
            cursor: pointer;
          }
        }
        .sub-title{
          font-size: 12px;
          margin-top:5px;
        }
      }
      .dui-goods-list{
        background: #fff;
        display: flex;
        justify-items: flex-start;
        align-items: center;
        .dui-goods-item{
          width:33.33%;
          box-sizing: border-box;
          padding:12px;
          .goods-img{
            width:100%;
            height:calc((100vw - 24px)*0.3333 - 24px);
            border-radius:8px ;
            overflow: hidden;
            .img{
              width:100%;
              height:100%;
              object-fit: contain;
            }
          }
          .goods-name{
            margin-top:10px;
            color: #333333;
            font-size:14px;
            line-height: 20px;
            overflow: hidden;
            text-overflow:ellipsis;
            white-space: nowrap;
          }
          .goods-attr{
            color: #8B8B8B;
            font-size:12px;
          }
          .goods-price{
            color: #FF0000;
            font-size:14px;
            font-weight: bold;
            margin-top:10px;
          }
        }
      }
    }

  }
  .hot-dui-block{
    padding:0 12px;
    margin-bottom:16px;
    .hot-dui-div{
      background: #fff;
      border-radius: 8px;
      padding:12px;
      .hot-title{
        font-size:16px;
        font-weight: bold;
        color:#333;
        line-height: 40px;
        height:40px;
        margin-bottom:10px;
      }
      .hot-goods-item{
        display: flex;
        justify-items: flex-start;
        align-items: center;
        margin-bottom:22px;
        cursor: pointer;
        .goods-img{
          width:50px;
          height:50px;
          position: relative;
        }
        .goods-info{
          padding-left:20px;
          padding-right:20px;
          width:calc(100% - 210px);
          flex:1;
          .goods-name{
            font-size: 14px;
            color: #333333;
            overflow: hidden;
            text-overflow:ellipsis;
            white-space: nowrap;
          }
          .goods-price{
            font-size: 14px;
            font-weight: bold;
            color: #FF0000;
            margin-top:8px;
          }
        }
        .goods-num{
          font-size:12px;
          color:#FF7526;
          width:80px;
          text-align: right;
        }
      }
      .hot-goods-item:last-child{
        margin-bottom:0
      }
    }

  }
  .goods-list{
    .goods-con{
      min-height:calc(100vh - 148px)
    }
    .van-hairline--top-bottom::after, .van-hairline-unset--top-bottom::after{
      border-width:0px;
    }
    .integral-tab{
      padding-left:10px;
      .u-tabs__wrapper__nav__item{
        background: #FFF3E9 !important;
        border-radius: 15px !important;
        height:30px !important;
        padding:0 10px !important;
        font-size:12px !important;
        color: #FC6E02 !important;
        margin-right:12px !important;
        line-height: 30px !important;
      }
      .van-tab--active{
        background: #FC6E02;
        color:#fff;
      }
      .van-tabs__line{
        height:0
      }
    }
    .goods-list-con{
      padding:0 12px;
      overflow: hidden;
      .goods-list-item{
        float:left;
        width:calc((100vw - 36px)/2);
        background: #fff;
        margin-top:20px;
        box-shadow: 0px 0px 10px rgba(255, 61, 0, 0.08);
        border-radius: 8px;
        margin-right:12px;
        cursor: pointer;
        overflow: hidden;
        .goods-img{
          width:calc((100vw - 36px)/2);
          height:calc((100vw - 36px)/2);
          img{
            width:100%;
            height:100%;
            object-fit: contain;
          }
        }
        .goods-name{
          line-height: 20px;
          font-size: 14px;
          color:#333;
          padding:10px 12px 0px 12px;
          overflow: hidden;
          text-overflow:ellipsis;
          white-space: nowrap;
        }
        .goods-attr{
          color: #8B8B8B;
          font-size:12px;
          padding:0 12px;
        }
        .goods-price{
          font-size: 16px;
          font-weight: bold;
          color: #FF0000;
          margin-top:10px;
          padding:0 12px 12px 12px;
        }
      }
      .goods-list-item:nth-child(2n){
        margin-right:0px;
      }
    }

  }
}
</style>


    
    
